$animation-timing: 27s;
$carousel-items: 9;
$animation-delay-fraction: calc($animation-timing / $carousel-items);
$animation-steps-fraction: calc(100 / $carousel-items);
$slide-change-timing: 3; // percentage of total

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  height: 100vh;
}

.wrapper {
  background: linear-gradient(60deg, #420285, #08bdbd);
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  .carousel {
    position: relative;
    width: 100%;
    max-width: 500px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    &_item {
      display: flex;
      align-items: center;
      position: absolute;
      width: 100%;
      padding: 0 12px;
      opacity: 0;
      filter: drop-shadow(0 2px 2px #555);
      will-change: trfansform, opacity;
      animation: carousel-animate-vertical $animation-timing linear infinite;

      @for $i from 1 to $carousel-items {
        &:nth-child(#{$i}) {
          animation-delay: calc(#{$animation-delay-fraction} * #{$i - 2});
        }
      }
      &:last-child {
        animation-delay: calc(-#{$animation-delay-fraction} * 2);
      }
      &-head {
        border-radius: 50%;
        background-color: #d7f7fc;
        width: 90px;
        height: 90px;
        padding: 14px;
        position: relative;
        margin-right: -45px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 50px;
      }
      &-body {
        width: 100%;
        background-color: #fff;
        border-radius: 8px;
        padding: 16px 20px 16px 70px;
      }
      .title {
        text-transform: uppercase;
        font-size: 20px;
        margin-top: 10px;
      }
    }
  }
}

@keyframes carousel-animate-vertical {
  0% {
    transform: translateY(100%) scale(0.5);
    opacity: 0;
    visibility: hidden;
  }

  #{percentage(calc($slide-change-timing / 100))},
  #{percentage(calc($animation-steps-fraction / 100))} {
    transform: translateY(100%) scale(0.7);
    opacity: 0.4;
    visibility: visible;
  }
  #{percentage(calc(($slide-change-timing + $animation-steps-fraction)/ 100))},
  #{percentage(calc($animation-steps-fraction / 50))} {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
  }

  #{percentage(calc(($slide-change-timing + $animation-steps-fraction * 2) / 100))},
  #{percentage(calc($animation-steps-fraction * 3 / 100))} {
    transform: translateY(-100%) scale(0.7);
    opacity: 0.4;
    visibility: visible;
  }
  #{percentage(calc(($slide-change-timing + $animation-steps-fraction * 3) / 100))} {
    transform: translateY(-100%) scale(0.5);
    opacity: 0;
    visibility: hidden;
  }
  100% {
    transform: translateY(100%) scale(0.5);
    opacity: 0;
    visibility: hidden;
  }
}
